<template>
  <div style="display: inline-block">
    <v-snackbar :timeout="3000" v-model="snackbar" top multi-line>
      {{ $t('navbar.langChange') }}
      <v-btn flat color="pink" @click.native="snackbar = false">{{$t('navbar.close')}}</v-btn>
    </v-snackbar>

    <v-menu bottom left>
      <v-btn icon slot="activator" dark>
        <v-icon>translate</v-icon>
      </v-btn>
      <v-list>
        <v-list-tile v-for="(lang, i) in langs" :key="i" @click="handleSetLanguage(lang.alias)">
          <v-list-tile-title>{{ lang.name }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>

  </div>
</template>

<script>
export default {
  data: () => ({
    snackbar: false,
    langs: [
      { alias: 'zh', name: '中文' },
      { alias: 'en', name: 'English' }
    ]
  }),
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('setLanguage', lang)
      this.snackbar = true
    }
  }
}
</script>
